<template>
	<view >
		<view 
			class="heda-bg h-176"
			:style="{
				'background': `url(${getImg('appointment-bg')}) no-repeat`,
			}"
		>
			<head-nav 
				title="预约时间" 
				bgColor="transparent" 
				titColor="#FFFFFF" 
				iconC="#FFFFFF"
			></head-nav>
		</view>
		<view class="date-box flex">
			<view 
				class="date-li flex-center  pos-rel"
				v-for="(item, index) in dateList"
				:key="index"
				:class="{'date-li-on': index == selectDate}"
				@click="selectDate = index"
			>
				<view class="flex-col flex-center" v-if="index != dateList.length - 1">
					<view class="date-week">
						明天
					</view>
					<view class="date-txt" >
						10-21
					</view>
				</view>
				<view class="flex-col flex-center" v-else>
					<view class="date-txt pad-b5" >
						更多
					</view>
					<u--image
						:showLoading="true" 
						:src="getImg('calendar')" 
						width="40rpx"
						height="40rpx"
					></u--image>
					
				</view>
			</view>
		</view>
		<view class="time-box padlr24">
			<view class="time-tit mar-t40">
				下午
			</view>
			<view class="time-list flex flex-wrap  mar-t6">
				<view 
					class="time-li mar-t18 flex-center" 
					v-for="(item ,index) in afternoonTime" 
					:key="index"
					:class="{'time-afternoon-on': !index}"
				>
					{{ item }}
				</view>
			</view>
			<view class="time-tit mar-t40">
				晚上
			</view>
			<view class="time-list flex flex-wrap  mar-t6">
				<view 
					class="time-li mar-t18 flex-center" 
					v-for="(item ,index) in nightTime" 
					:key="index"
					:class="{'time-afternoon-on': !index}"
				>
					{{ item }}
				</view>
			</view>
			<view class="tips-txt flex-a mar-t40">
				<u--image
					:showLoading="true" 
					:src="getImg('tips-icon')" 
					width="40rpx"
					height="40rpx"
				></u--image>
				<view class="mar-l6">
					请注意：预约服务需提前1小时
				</view>
			</view>
		</view>
		<view class="fot-box pad-b88 flex-a ju-bt">
			<view class="fot-tips flex-a">
				<view class="fot-label">
					预约时间
				</view>
				<view class="fot-time mar-l32">
					<text>今天</text>
					<text class="mar-l20">14:00</text>
				</view>
			</view>
			<view class="fot-btn flex-center" @click="onNext">
				下一步
			</view>
		</view>
	</view>
</template>

<script> // 预约时间
	export default {
		data() {
			return {
				dateList: [1,1,1,1,1],
				selectDate: 0,
				afternoonTime: [], // 上午
				nightTime: [], // 晚上
			}
		},
		onLoad() {
			this.afternoonTime = this.generateTimes("12:00", "17:45");
			this.nightTime = this.generateTimes("18:00", "21:30")
		},
		methods: {
			onNext() {
				this.$goRouter("/pages/subscribe/pages/appointmentConfirm")
			},
			generateTimes(startTime, endTime) {
			  const times = [];
			  
			  // 将 startTime 和 endTime 的小时和分钟提取出来
			  let [startHour, startMinute] = startTime.split(":").map(Number);
			  let [endHour, endMinute] = endTime.split(":").map(Number);
			
			  // 开始时间转换为分钟数（从 00:00 开始的分钟数）
			  let currentTimeInMinutes = startHour * 60 + startMinute;
			  const endTimeInMinutes = endHour * 60 + endMinute;
			
			  while (currentTimeInMinutes <= endTimeInMinutes) {
			    // 计算小时和分钟
			    const hours = Math.floor(currentTimeInMinutes / 60).toString().padStart(2, '0');
			    const minutes = (currentTimeInMinutes % 60).toString().padStart(2, '0');
			    
			    // 添加时间到结果数组
			    times.push(`${hours}:${minutes}`);
			
			    // 增加 15 分钟
			    currentTimeInMinutes += 15;
			  }
			
			  return times;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fot-box{
		.fot-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
		.fot-time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #333333;
		}
		.fot-btn {
			width: 196rpx;
			height: 72rpx;
			background: #FF7171;
			border-radius: 54rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.time-box {
		.tips-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #111111;
		}
		.time-list {
			.time-li {
				width: 162rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				border: 2rpx solid #E6E6E6;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin: 18rpx 6rpx 0;
			}
			.time-afternoon-on {
				background: #FF7171;
				color: #FFFFFF;
			}
			
		}
		.time-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}
	}
	.date-box {
		.date-li {
			width: 50%;
			height: 126rpx;
			.date-week {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			.date-txt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			&:not(:last-child)::after {
			  	content: "";
			  	position: absolute;
			  	right: 0;
			  	top: 50%;
			  	transform: translateY(-50%);
			  	width: 2rpx;
			  	height: 86rpx;
			  	background: #E6E6E6;
			}
		}
		.date-li-on::before {
			content: "";
			width: 148rpx;
			height: 10rpx;
			background: #FF7171;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>
